<template>
	<view class="home" :style="'margin-top:'+mt+'px'">
		<swiper class="swiper-container" indicator-dots autoplay :interval="3000" :duration="1000">
			<swiper-item v-for="item in bannerList" :key="item.id">
				<!-- 默认 320*240 -->
				<image class="banner-img" :src="item.pic" mode=""></image>
			</swiper-item>
		
		</swiper>
		<button type="default" @tap="getProductList">获取商品列表</button>
		<view class="box">
			
		</view>
		
		<!-- #ifdef H5 -->
		<view >
			只在h5端展示
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view >
			只在 微信小程序 端展示
		</view>
		
		<!-- #endif -->
		
		
		<view class="demo">
			在 h5 端 字体颜色是red
			在 小程序 端 字体颜色是blue
		</view>
		
	</view>
</template>

<script>
	import {
		bannerAds ,
		categorys,
		findProductList
	} from '@/api/home/index.js'
	export default {
		name:"Home",
		data() {
			return {
				mt:0,
				bannerList:[]
			}
		},
		// 生命周期钩子
		// created() {
		// 	uni.request({
		// 		url:'http://leju.bufan.cloud/lejuClient/home/bannerAds',
		// 		timeout:5000,
		// 		method:'GET',
		// 		success(res){
		// 			console.log(res);
		// 		}
		// 	})
		// },
		async onLoad() {
			this.getBannerList()
			this.getCategoryList()
			// #ifdef MP-WEIXIN
			let obj = uni.getMenuButtonBoundingClientRect()
			// console.log("obj=>",obj);
			this.mt = obj.height + obj.top
			// #endif
			
		},
		methods: {
			async getBannerList(){
				let res = await bannerAds()
				// console.log(res);
				const {success,message,data} = res
				if(success){
					this.bannerList = data.items
				}else{
					uni.showToast({
						title:message,
						icon:"none"
					})
				}
			},
			async getCategoryList(){
				let res = await categorys('1308336521604599809')
			
			},
			async getProductList(){
			 let res = await 	findProductList(1,10,{
							"categoryId": "1308339256886423554"
						})
			 console.log(res);
			}
		}
	}
</script>

<style lang="scss" scoped>
.home{
	// padding-top: var(--status-bar-height);
	.swiper-container{
		height: 516rpx;
		.banner-img{
			width: 100%;
			height: 100%;
		}
	}
	
	.box{
		width: 144rpx;
		height: 124rpx;
		background-color: red;
	}
	
	.demo{
		/* #ifdef H5 */
		color: red;
		/* #endif */
		
		/* #ifdef MP-WEIXIN */
		color: blue;
		/* #endif */
		
	}
	
}
</style>
